<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客详情页</title>
    <script th:src="@{/js/jquery.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/blog_detail.css}">
</head>
<body>
<!--登录会话状态-->
<div type="hidden" id="sessionUser" th:text="${session.USER_LOGIN_STATE?.id}"></div>

<!-- 导航栏 -->
<div class="nav">
    <img th:src="@{/image/avatar.jpg}">
    <span class="title">枸杞的博客</span>

    <!--    这个标签仅仅用于占位 ,把下面几个a 标签挤到右边-->
    <div class="spacer"></div>

    <button id="list" type="button">主页</button>
    <button id="issue" type="button" th:if="${session.USER_LOGIN_STATE?.id != null}">写博客</button>
    <button id="logout" type="button" th:if="${session.USER_LOGIN_STATE?.id != null}">注销</button>
    <button id="login" type="button" th:if="${session.USER_LOGIN_STATE?.id == null}">登录</button>

</div>

<!-- 页面主体部分 -->
<div class="container">
    <!--左侧信息-->

    <div class="container-left">

        <!--使用 这个 .card 表示用户信息-->
        <div class="card">
            <img th:src="@{/image/avatar.jpg}" alt="图片显示失败">
            <!--            用户名-->
            <h3>程序员枸杞</h3>
            <a th:href="@{https://gitee.com/zh-jiaqi}" target="_blank">Gitee 地址</a>
            <div class='counter'>
                <span>文章</span>
                <span>标签</span>
            </div>
            <div class="counter">
                <span th:utext="${essayCount}"></span>
                <span th:utext="${tagsCount}"></span>
            </div>
        </div>
    </div>

    <!--    右侧信息-->
    <div class="container-right">

        <!-- 博客标题 -->
        <h3 class="title" th:utext="${essay.title}"></h3>
        <h4 class="title" th:utext="'作者：'+${user.userAccount}"></h4>
        <div id="essayId" th:text="${essay.id}" style="display: none"></div>
        <!-- 博客发布时间-->
        <div class="date"
             th:utext="${essay.createTime}+'<br><br><p>点赞数：'+${essay.thumbNum}+'&emsp;转发数：'+${essay.forwardNum}+'&emsp;收藏数：'+${essay.favourNum}+'</p>'">
        </div>
        <!-- 博客正文 -->
        <div class="content">
            <p th:utext="${essay.content}"></p>
            <button id="editEssay" type="button" th:if="${session.USER_LOGIN_STATE?.id==essay.userId}">编辑文章</button>
            <button id="deleteEssay" type="button" th:if="${session.USER_LOGIN_STATE?.id==essay.userId}">删除文章
            </button>
            <br>
            <br>
            <button id="thumb">点赞</button>
            <button id="forward">转发</button>
            <button id="favour">收藏</button>
            <br>
            <br>
        </div>
        <div class="comment-container">
            <h3>评论区</h3>
            <hr>
            <textarea id="comment" class="mo-textarea"></textarea>
            <button id="addComment" type="button">发送</button>
        </div>
        <div id="commend" th:each="comment,state : ${commentList}">
            <hr>
            <p class="commentItem" th:text="'用户：'+${comment.user.userAccount}"></p>
            <p class="commentItem" th:text="'评论内容：'+${comment.content}"></p>
            <p class="commentItem" th:text="'评论时间：'+${comment.createTime}"></p>
            <a class="commentItem" th:href="@{/comment/delete(id=${comment.id})}" th:if="${session.USER_LOGIN_STATE?.id==comment.user.id}">删除</a>
        </div>
    </div>
</div>
</body>
<script>

    let host = "http://127.0.0.1:8080";

    $("#login").click(function () {
        window.location.href = host + "/";
    })

    $("#list").click(function () {
        window.location.href = host + "/list";
    })

    $("#issue").click(function () {
        let userId = document.getElementById("sessionUser").innerText
        if (userId == "") {
            alert("请先登录")
            window.location.href = host + "/";
            return
        }
        window.location.href = host + "/issue";
    })

    $("#logout").click(function () {
        $.ajax({
            url: host + "/user/logout", method: "post", success: function (res) {//res为返回结果
                if (res.code == 1) {
                    alert("注销成功")
                    window.location.href = host + "/";
                } else {
                    alert("注销失败")
                }
            }, error: function () {//运行错误会执行此方法
                alert("点赞失败")
                window.location.href = host + "/403";
            }
        })
    })

    $("#addComment").click(function () {
        let userId = document.getElementById("sessionUser").innerText
        let essayId = document.getElementById("essayId").innerText
        let comment = document.getElementById("comment").value
        if (userId == "") {
            alert("请先登录")
            window.location.href = host + "/";
            return
        }
        let params = {
            userId: userId,
            essayId: essayId,
            content: comment,
            replyTo: ''
        }
        $.ajax({
            url: host + "/comment/add",
            method: "post",
            data: JSON.stringify(params),
            contentType: 'application/json',
            //res为返回结果
            success: function (res) {
                if (res.code == 1) {
                    alert("评论成功")
                    //页面重新加载
                    location.reload(true)
                } else {
                    alert("评论失败")
                }
            },
            error: function () {//运行错误会执行此方法
                alert("评论失败")
                window.location.href = host + "/403";
            }
        })
    })

    $("#thumb").click(function () {
        let userId = document.getElementById("sessionUser").innerText
        let essayId = document.getElementById("essayId").innerText
        if (userId == "") {
            alert("请先登录")
            window.location.href = host + "/";
            return
        }
        let params = {
            userId: userId,
            essayId: essayId,
        }
        $.ajax({
            url: host + "/thumb/update",
            method: "post",
            data: JSON.stringify(params),
            contentType: 'application/json',
            success: function (res) {//res为返回结果
                alert("点赞成功")
            },
            error: function () {//运行错误会执行此方法
                alert("点赞失败")
                window.location.href = host + "/403";
            }
        })
    })
    $("#forward").click(function () {
        let userId = document.getElementById("sessionUser").innerText
        let essayId = document.getElementById("essayId").innerText
        if (userId == "") {
            alert("请先登录")
            window.location.href = host + "/";
            return
        }
        let params = {
            userId: userId,
            essayId: essayId,
        }
        $.ajax({
            url: host + "/forward/update",
            method: "post",
            data: JSON.stringify(params),
            contentType: 'application/json',
            success: function (res) {//res为返回结果
                alert("转发成功")
            },
            error: function () {//运行错误会执行此方法
                alert("转发失败")
                window.location.href = host + "/403";
            }
        })
    })
    $("#favour").click(function () {
        let userId = document.getElementById("sessionUser").innerText
        let essayId = document.getElementById("essayId").innerText
        if (userId == "") {
            alert("请先登录")
            window.location.href = host + "/";
            return
        }
        let params = {
            userId: userId,
            essayId: essayId,
        }
        $.ajax({
            url: host + "/favour/update",
            method: "post",
            data: JSON.stringify(params),
            contentType: 'application/json',
            success: function (res) {//res为返回结果
                if (res.code == 1) {
                    alert("收藏成功")
                } else {
                    alert("收藏失败")
                }
            },
            //运行错误会执行此方法
            error: function () {
                alert("收藏失败")
                window.location.href = host + "/403";
            }
        })
    })

    $("#editEssay").click(function () {
        let essayId = document.getElementById("essayId").innerText
        window.location.href = host + "/edit?id=" + essayId;
    })

    $("#deleteEssay").click(function () {
        let userId = document.getElementById("sessionUser").innerText
        let essayId = document.getElementById("essayId").innerText
        if (userId == "") {
            alert("请先登录")
            window.location.href = host + "/";
            return
        }
        let params = {
            id: essayId,
        }
        $.ajax({
            url: host + "/essay/delete",
            method: "post",
            data: JSON.stringify(params),
            contentType: 'application/json',
            // res为返回结果
            success: function (res) {
                if (res.code == 1) {
                    alert("删除成功")
                    window.location.href = host + "/list";
                } else {
                    alert("删除失败")
                }
            },
            // 运行错误会执行此方法
            error: function () {
                alert("删除失败")
                window.location.href = host + "/403";
            }
        })
    })
</script>
</html>




